<template>
  <div id="footer-component">
    <ul>
      <li v-for="(item, index) in datas" :key="index" @click="change(index)">
        <router-link
          :to="item.path"
          :class="index == current_index ? 'color' : ''"
        >
          <van-icon :name="item.icon" />
          <span>{{ item.name }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      //储存图标和名字
      datas: [
        {
          name: "首页",
          icon: "wap-home-o",
          path: "/home",
        },
        {
          name: "分类",
          icon: "qr",
          path: "/classify",
        },
        {
          name: "购物车",
          icon: "shopping-cart-o",
          path: "/cart",
        },
        {
          name: "我的",
          icon: "user-o",
          path: "/my",
        },
      ],
      current_index: 0,
    }
  },
  created() {
    this.current_index = localStorage.getItem("current_index")
  },
  methods: {
    change(val) {
      this.current_index = val
      localStorage.setItem("current_index", val)
    },
  },
}
</script>

<style lang="less" scoped>
#footer-component {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  height: 45px;
  box-sizing: content-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  ul {
    display: flex;
    width: 100%;
    text-align: center;
    li {
      flex: 1;
      span {
        display: block;
      }
      i {
        font-size: 22px;
      }
    }
  }
}

.color {
  color: #ff8198;
}
</style>
